<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
  <title>TodoList</title>
  <style>
    /* #app>div{
      width:200px;
      height:200px;
    }
    .box1{
      background:lightpink;
      position:relative;
      top:10px;
    }
    .box2{
      background:lightskyblue;
    } */
    .sel{
      color:#999;
      text-decoration:line-through;
    }
  </style>
</head>
<body>
  <div id="app">
      <!-- <div class="box1"></div>
      <div class="box2"></div> -->
      <div class="container">
        <div class="row">
          <div class="col-md-6 col-sm-8 col-md-offset-3 col-sm-offset-2">
            <div class="panel panel-primary">
              <div class="panel-heading">
                <h2>你有{{num}}件未完成事情</h2>
                <input type="text" @keyup.enter="addTodo" v-model="title" class="form-control">
              </div>
              <div class="panel-body">
                <ul class="list-group">
                  <li class="list-group-item" v-for="item in filterList" @dblclick="cur = item">
                    <span v-show="cur !== item">
                      <input type="checkbox" v-model="item.isSelected">
                      <span style="vertical-align:top;" :class="{sel:item.isSelected}">{{item.title}}</span>
                    </span>
                    <input type="text" v-model="item.title" class="" @keyup.enter="cur = ''" v-show="cur === item" v-focus="cur === item" @blur="cur = ''">

                    <button @click="remove(item)" class="btn btn-xs btn-danger pull-right">&bigotimes;</button>
                  </li>
                </ul>
              </div>
              <div class="panel-footer">
                <ul class="nav nav-pills">
                  <li role="presentation" :class="{active: hash == 'all'}"><a href="#/all">全部</a></li>
                  <li role="presentation" :class="{active: hash == 'finish'}"><a href="#/finish">已完成</a></li>
                  <li role="presentation" :class="{active: hash == 'unfinish'}"><a href="#/unfinish">未完成</a></li>
                </ul>
              </div>
            </div>
          </div>
          
        </div>
      </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        title: '',
        cur:'', // 记录双击的item
        todoList: [
          {
            title: '看电影',
            isSelected: false
          },
          {
            title: '吃饭',
            isSelected: true
          },
          {
            title: '打王者',
            isSelected: false
          }
        ],
        hash: ''
      },
      created(){
        // 给todoList赋值 从缓存中获取出来
        if(localStorage.getItem('todo')){
          this.todoList = JSON.parse(localStorage.getItem('todo'))
        }
        this.hash = location.hash.split('/')[1] || 'all'
        // 可以使用this下面的数据
        window.addEventListener('hashchange', ()=>{
          this.hash = location.hash.split('/')[1]
        })
      },
      computed:{
        num(){
          return this.todoList.filter(item => !item.isSelected).length
        },
        filterList(){
          // 依赖hash值
          // 记录在本地存储中 localStorage 只要不是清除浏览器缓存，就会永久保存
          // 存储的是字符串
          localStorage.setItem('todo', JSON.stringify(this.todoList))
          return this.todoList.filter(item => {
            if(this.hash == 'all'){
              return true
            } else if(this.hash == 'finish'){
              return item.isSelected
            }  else if(this.hash == 'unfinish'){
              return !item.isSelected
            } 
          })
        }
      },
      methods:{
        addTodo(){
          if(!this.title) return 
          this.todoList.unshift({title: this.title, isSelected: false})
          this.title = ''
        },
        remove(item){
          this.todoList = this.todoList.filter(val => val != item)
        }
      },
      directives: {
        focus(el, obj){
          if(obj.value){
            el.focus()
          }
        }
      }
    })

    /**
     * 
        我院子里有四万万朵玫瑰花
        每一天早晨 我就捧着一本书在门口
        所有的路人路过 都要称赞我的玫瑰花
        也有想要折去一两朵的
        我通通不理睬
        知道那天你来
        笑眼咪成月牙
        问我 看的什么书啊
        我就知道 这四万万朵玫瑰花
        通通都是你的


        在没有实现自我价值，你自己都不算活明白的前提下
        遇到对的人也留不住

     */
  </script>
</body>
</html>